
angular.module('zixys.2dtransform',[])
    
    .directive('2dTransformTab',function(){
        return {
            restrict: 'C',
            replace: false,
            template:							
                    '<div id="zixys-background-tab" ng-controller="2dTransformCtrl">'+
                        '<div class="zixys-inner-tab long-block" src="transform-type-content">'+
                            '<div>Translate</div>'+
                            '<div>Rotate</div>'+
                            '<div>Scale</div>'+
                            '<div>Skew</div>'+
                        '</div>'+
                        '<div id="transform-type-content">'+
                            //translate
                            '<div>'+
                                '<div class="zixys-menu-block" >'+
                                    '<div class="zixys-input-box"><span class="zixys-menu-label">Top</span><input class="zixys-spinner" ng-model="translate.top" ng-disabled="disabled" type="text"></div>'+
                                    '<div class="zixys-input-box"><span class="zixys-menu-label">Left</span><input class="zixys-spinner" ng-model="translate.left" ng-disabled="disabled" type="text"></div>'+
                                '</div>'+
                            '</div>'+
                            //Rotate
                            '<div>'+
                                '<div class="zixys-menu-block" >'+
                                    '<div class="zixys-input-box"><span class="zixys-menu-label">angle (deg)</span><input class="zixys-spinner" ng-model="rotate.angle" ng-disabled="disabled" type="text"></div>'+
                                '</div>'+
                            '</div>'+
                            //scale
                            '<div>'+
                                '<div class="zixys-menu-block" >'+
                                    '<div class="zixys-input-box"><span class="zixys-menu-label">Top</span><input class="zixys-spinner" ng-model="scale.top" ng-disabled="disabled" type="text"></div>'+
                                    '<div class="zixys-input-box"><span class="zixys-menu-label">Left</span><input class="zixys-spinner" ng-model="scale.left" ng-disabled="disabled" type="text"></div>'+
                                '</div>'+
                            '</div>'+
                            //skew
                            '<div>'+
                                '<div class="zixys-menu-block" >'+
                                    '<div class="zixys-input-box"><span class="zixys-menu-label">angle X</span><input class="zixys-spinner" ng-model="skew.x" ng-disabled="disabled" type="text"></div>'+
                                    '<div class="zixys-input-box"><span class="zixys-menu-label">angle Y</span><input class="zixys-spinner" ng-model="skew.y" ng-disabled="disabled" type="text"></div>'+
                                '</div>'+
                            '</div>'+
                            '<div class="zixys-template-action">'+
                                '<input type="button" value="Revert" />'+
                            '</div>'+
                            '<div class="coord"></div>'+
                        '</div>'+
                     '</div>',


            link: function($scope, element, attrs) {
                
            }
        }
    })
    
    .controller('2dTransformCtrl',['$scope', function($scope){
        var zxNode;
        $scope.disabled = true;

        function resetForm(){
            $scope.translate = {
                top:0,
                left:0
            };

            $scope.rotate = {
                angle:0
            }

            $scope.scale = {
                top:0,
                left:0
            };

            $scope.skew = {
                x:0,
                y:0
            };
        }

        function getCss(){
            var codeLine = '',css;

            if ($scope.translate.top || $scope.translate.left ) {
                codeLine = codeLine + 'translate( {{translate.left}}px, {{translate.top}}px ) ';
            }

            if ($scope.rotate.angle ) {
                codeLine = codeLine + 'rotate( {{rotate.angle}}deg ) ';
            }

            if ($scope.scale.top || $scope.scale.left ) {
                codeLine = codeLine + 'scale( {{scale.left}}, {{scale.top}} ) ';
            }

            if ($scope.skew.x || $scope.skew.y ) {
                codeLine = codeLine + 'skew( {{skew.x}}deg, {{skew.y}}deg ) ';
            }
            if(!codeLine) return;

            css = "transform: "+codeLine+";"+
                  "-ms-transform: "+codeLine+";"+ /* IE 9 */
                  "-webkit-transform: "+codeLine+";"; /* Safari and Chrome */

            css = $interpolate(css)($scope);

            zxNode.addData('transform',{
                translate : $scope.translate,
                rotate : $scope.rotate,
                scale : $scope.scale,
                skew : $scope.skew
            });
            //Style.set(element,'transform',css);
        }

        resetForm();

        $scope.$on('selectElement',function(event,zixysNode){
            zxNode = zixysNode;
            $scope.disabled = false;
        });

        $scope.$watch('translate',getCss,true);
        $scope.$watch('rotate',getCss,true);
        $scope.$watch('scale',getCss,true);
        $scope.$watch('skew',getCss,true);

    }])

    .directive('coord',function(){
        return {
            restrict:'C',
            link : function($scope, element, attrs) {

                var div = $('.b4');
                var ax = $('#axis').show();
                var $x = ax.find('.x');
                var $y = ax.find('.y');
                var $z = ax.find('.z');
                var x = 0, y = 0, z = 0;

                var degToRad = function(val){
                    return val*0.017444;
                }

                var set = function () {
                    div.css('transform', 'perspective(1000px) translateY(-100px) rotateX('+x+'deg) rotateY('+y+'deg) rotateZ('+z+'deg)');
                }

                $x.mousedown(function(e){
                    if(e.metaKey){
                        x = x -10;
                    }else{
                        x = x +10;
                    }

                    set();
                })
                $y.mousedown(function(e){
                    if(e.metaKey){
                        y = y -10;
                    }else{
                        y = y +10;
                    }

                    set();
                })

                $z.mousedown(function(e){
                    if(e.metaKey){
                        z = z-10;
                    }else{
                        z = z+10;
                    }

                    set();
                })
            }
        }
    })

    .run(['$rootScope',function($rootScope){
        
        $rootScope.$on('zixysDomReady',function(event,params){
            $rootScope.addTab('Transform (2D)','2d-transform-tab');
        });
        
    }]);
    
    